// Basic styling for html input elements

// UNSORTED INPUT RULES (TODO SORT)

input, select, textarea {
	background-color: @color-bg-input;
	color: @color-text-default;
	border: 1px solid @color-border-box-1;
}

// RANGE

@size-input-range-thumb: 15px;

input[type=range] {
	background: inherit;
	border: none;
	margin: 3px 5px;
	vertical-align: middle;
	cursor: pointer;
	height: 20px;
	-webkit-appearance: none;
}

input[type=range]:focus {
	outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
	height: 5px;
	cursor: pointer;
	animate: 0.2s;
	background: @color-bg-input;
}

input[type=range]::-webkit-slider-thumb {
	border: 1px solid @color-border-highlight;
	height: @size-input-range-thumb;
	width: @size-input-range-thumb;
	border-radius: @size-input-range-thumb;
	background: @color-text-default;
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -5px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
	background: @color-bg-input;
}

input[type=range]::-moz-range-track {
	width: 100%;
	height: 5px;
	cursor: pointer;
	animate: 0.2s;
	background: @color-bg-input;
}

input[type=range]::-moz-range-thumb {
	border: 1px solid @color-border-highlight;
	height: @size-input-range-thumb;
	width: @size-input-range-thumb;
	border-radius: @size-input-range-thumb;
	background: @color-text-default;
	cursor: pointer;
}

input[type=range]::-ms-track {
	width: 100%;
	height: 5px;
	cursor: pointer;
	animate: 0.2s;
	background: transparent;
	border-color: transparent;
	color: transparent;
}

input[type=range]::-ms-fill-lower {
	background: @color-text-default;
	border: 0px solid #000000;
	border-radius: 2px;
}

input[type=range]::-ms-fill-upper {
	background: @color-text-default;
	border: 0px solid #000000;
	border-radius: 2px;
}

input[type=range]::-ms-thumb {
	margin-top: 1px;
	border: 1px solid @color-border-highlight;
	height: @size-input-range-thumb;
	width: @size-input-range-thumb;
	border-radius: @size-input-range-thumb;
	background: @color-text-default;
	cursor: pointer;
}

input[type=range]:focus::-ms-fill-lower {
	background: @color-text-default;
}

input[type=range]:focus::-ms-fill-upper {
	background: @color-text-default;
}

// CHECKBOX

.checkbox {
	width: 1em;
	height: 1em;
	border-width: 1px;
	border-style: solid;
	display: inline-block;
	margin: 1px 3px;
	vertical-align: middle;
	cursor: pointer;
}

.checkbox-label {
	display: inline-block;
	vertical-align: middle;
	margin: 0;
}

// SELECT

select {
	margin: 0px 5px;
	padding: 1px 3px;
}

// AMOUNT

input.amount {
	width: 30pt;
	margin: 0;
	padding: 1px;
	text-align: center;
	border-width: 1px 0px;
}
